<style type="text/css">
  .bg-area{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -999;
  }
  .bg-area .bg-img{
    position: absolute;
    left: 10%;
    bottom: 0px;
    width: 759px;
    height: 309px;
  }
  .bg-area .logo-img{
    position: absolute;
    right: 20px;
    top: 30px;
    width: 88px;
    height: 26px;
  }
  .title-area{
    margin-top: 15%;
    font-size: 2.6em;
    color: #4b4b4b;
  }
  .notice-area{
    color: #646464;
    font-size: 1.6em;
    margin-top: 5%;
  }
  .graphic-area{
    margin-top: 2%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .mssage-box{
    opacity: 0;
    cursor: default;
  }
  @media screen and (min-width: 1400px){
    .title-area{
      font-size: 2.8em;
    }
    .notice-area{
      font-size: 1.8em;
    }
    .bg-area .bg-img{
      width: 800px;
      height: 329px;
    }
    .bg-area .logo-img{
      width: 92px;
      height: 28px;
    }
  }
  @media screen and (min-width: 1600px){
    .title-area{
      font-size: 3.6em;
    }
    .notice-area{
      font-size: 2.6em;
    }
    .bg-area .bg-img{
      width: 900px;
      height: 379px;
    }
    .bg-area .logo-img{
      width: 102px;
      height: 33px;
    }
  }
</style>
<title>座位查询</title>
<div class="container-fluid">
  <div class="row">
    <div class="bg-area">
      <%= image_tag current_event.seat_search_bg.url, class:"bg-img"%>
      <%= image_tag 'attendee_seats/logo.png', class:"logo-img"%>
    </div>
    <div class="col-xs-6 col-xs-offset-3 text-center page-area">
      <div class="title-area">座位自助查询</div>
      <div class="notice-area">请在旁边的读卡器上刷卡查询您的座位</div>
      <div class="graphic-area">
        <%= image_tag 'attendee_seats/graphic.jpg',class:"img-responsive" %>
      </div>
      <div class="">
        <%= form_tag event_attendee_seat_path(current_event, params[:session_id]), id: 'attendee-keyword', method: 'get' do %>
          <input class="mssage-box" name="keyword" type="text"/>
          <input class="hidden" name="session_id" value=<%= params[:session_id] %>>
        <% end %>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){ //文档读取时赋予文本框焦点
    $('.mssage-box').focus();
  })
  $(document).click(function(){ //文档被点击时避免文本框失去焦点
    $('.mssage-box').focus();
  })
  $('.mssage-box').keypress(function(event){ //检测输入了回车
    var keyCode = event.which||event.keyCode;
    if(keyCode == 13)//点击了回车
    {
      $('#attendee-keyword').submit();
      //此处进行数据的提交
      $('.mssage-box').val("");//提交时将文本款数据清空,以免返回后文本框内有值
    }
  })
</script>